<template>
  <div class="indexPage">
    <div class="row">
      <div class="banner_box">
        <img src="../../static/img/banner.jpg" style="width:100%" alt="">
      </div>
    </div>
    <div class="row tle_s">
      <p class="en_txt">SERVICE ITEMS</p>
      <img class="tle_icon" src="../../static/icon/tle_iocn.jpg" alt="">
      <p class="ch_txt">服务项目</p>
    </div>
    <div class="row cont">
      <div class="service_box" v-for="item in service_nav">
        <img :src="item.icon" alt="" style="margin-bottom:30px;">
        <p class="ch_txt">{{item.tle}}</p>
        <p class="service_box_txt">{{item.service_box_txt}}</p>
      </div>
    </div>
    <div class="row tle_s">
      <p class="en_txt">Technological capability</p>
      <img class="tle_icon" src="../../static/icon/tle_iocn.jpg" alt="">
      <p class="ch_txt">技术能力</p>
    </div>
    <div class="row cont">
      <div class="col-md-3 artisan_box" v-for="item in Artisan_box">
        <img :src="item.pic" alt="">
        <p style="font-size:18px;color:#333;margin-top:15px">{{item.name}}</p>
        <p>{{item.describe}}</p>
      </div>
    </div>
    <div class="row tle_s">
      <p class="en_txt">Industry application</p>
      <img class="tle_icon" src="../../static/icon/tle_iocn.jpg" alt="">
      <p class="ch_txt">行业应用</p>
    </div>
    <div class="row cont">
      <ul class="nav_s">
        <li v-for="v in nav_s">
          <a :href="v.link" :class="{navs_active:v.active}">{{v.name}}</a>
        </li>
      </ul>
      <div class="anli_main">
        <img src="../../static/img/anli1.jpg" alt="" style="width:100%">
        <span class="btn">
          <img src="../../static/icon/btn.jpg" alt="">
        </span>
      </div>
    </div>
    <div class="row tle_s">
      <p class="en_txt">Case presentation</p>
      <img class="tle_icon" src="../../static/icon/tle_iocn.jpg" alt="">
      <p class="ch_txt">案例展示</p>
    </div>
    <div class="row cont">
      <div class="col-md-4 anli_box" v-for="item in anli_box">
        <img :src="item.img" alt="">
        <p class="anli_txt">{{item.tle}}</p>
      </div>
      <span class="btn">
        <img src="../../static/icon/btn.jpg" alt="">
      </span>
    </div>
    <div class="row function_plan">
      <div class="row tle_s">
        <p class="en_txt" style="color:#fff">Function plan</p>
        <img class="tle_icon" src="../../static/icon/icon06.png" alt="">
        <p class="ch_txt" style="color:#fff">功能方案</p>
      </div>
      <div class="row cont">
        <div class="col-md-3 funcplan_item" v-for="item in funcplan_arr">
          <div class="icon_s">
            <img :src="item.icon" alt="">
          </div>
          <div class="item_border"></div>
          <p class="item_tle">{{item.tle}}</p>
          <p class="item_cont">{{item.cont}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      funcplan_arr: [
        {
          icon: "../../static/icon/icon07.png",
          tle: "通讯类",
          cont:
            "GPRS通讯方案、射频通讯方案、NB-IOT方案、蓝牙通讯方案、WIFI通讯方案"
        },
        {
          icon: "../../static/icon/icon08.png",
          tle: "接口类",
          cont: "USB通讯方案、串口通讯方案、485通讯方案、SPI通讯方案"
        },
        {
          icon: "../../static/icon/icon09.png",
          tle: "电机控制",
          cont:
            "步进电机控制、交流电机控制、步进电机控制、交流电机控制、步进电机控制"
        },
        {
          icon: "../../static/icon/icon10.png",
          tle: "位置服务",
          cont:
            "GPS定位服务、市内定位、GPS定位服务、市内定位、GPS定位服务、市内定位"
        }
      ],
      nav_s: [
        {
          name: "医疗检测设备",
          active: true,
          link: "/"
        },
        {
          name: "电机控制",
          active: false,
          link: "/"
        },
        {
          name: "农业自动化",
          active: false,
          link: "/"
        },
        {
          name: "车辆定位",
          active: false,
          link: "/"
        },
        {
          name: "物品防丢",
          active: false,
          link: "/"
        },
        {
          name: "空气质量检测",
          active: false,
          link: "/"
        }
      ],
      service_nav: [
        {
          icon: "../../static/icon/icon01.png",
          tle: "硬件设计",
          service_box_txt:
            "PCB设计、元器件选型、样板生产、工业设计、3D样品打印、模具生产设计"
        },
        {
          icon: "../../static/icon/icon02.png",
          tle: "嵌入式软件开发",
          service_box_txt:
            "51单片机程序开发、STM32系列程序开发、ARM系列程序开发"
        },
        {
          icon: "../../static/icon/icon03.png",
          tle: "安卓系统上的软件开发",
          service_box_txt:
            "人机交互安卓应用开发、人机交互安卓应用开发、人机交互安卓应用开发"
        },
        {
          icon: "../../static/icon/icon04.png",
          tle: "服务器端软件开发",
          service_box_txt:
            "WEB方式物联网服务平台开发、WEB方式物联网服务平台开发"
        },
        {
          icon: "../../static/icon/icon05.png",
          tle: "PC端软件开发",
          service_box_txt:
            "配合硬件设备的上位机软件开发、配合硬件设备的上位机软件开发"
        }
      ],
      Artisan_box: [
        {
          name: "王旭",
          describe: "硬件设计师",
          pic: "../../static/img/men1.jpg"
        },
        {
          name: "胡英俊",
          describe: "嵌入式开发",
          pic: "../../static/img/men2.jpg"
        },
        {
          name: "李东宇",
          describe: "安卓开发",
          pic: "../../static/img/men1.jpg"
        },
        {
          name: "张玲",
          describe: "前端工程师",
          pic: "../../static/img/men3.jpg"
        }
      ],
      anli_box: [
        {
          tle: "车辆定位器",
          tle_en: "Car Locator",
          img: "../../static/img/anli2.jpg"
        },
        {
          tle: "车辆定位器",
          tle_en: "Car Locator",
          img: "../../static/img/anli2.jpg"
        },
        {
          tle: "车辆定位器",
          tle_en: "Car Locator",
          img: "../../static/img/anli2.jpg"
        },
        {
          tle: "车辆定位器",
          tle_en: "Car Locator",
          img: "../../static/img/anli2.jpg"
        },
        {
          tle: "车辆定位器",
          tle_en: "Car Locator",
          img: "../../static/img/anli2.jpg"
        },
        {
          tle: "车辆定位器",
          tle_en: "Car Locator",
          img: "../../static/img/anli2.jpg"
        }
      ]
    }
  },
  mounted() {},
  methods: {}
}
</script>
<style scoped>
.item_border {
  position: absolute;
  left: 80px;
  top: 30px;
  width: 26px;
  height: 1px;
  background: #fff;
}
.funcplan_item {
  position: relative;
  color: #fff;
}
.item_tle {
  font-size: 20px;
  position: absolute;
  left: 80px;
  top: -8px;
}
.item_cont {
  position: absolute;
  top: 40px;
  left: 78px;
  width: 150px;
}
.icon_s {
  position: absolute;
  left: 20px;
}
.function_plan {
  background-image: url("../../static/img/bg_img1.jpg");
  width: 100%;
  height: 500px;
  margin: 0 !important;
  padding: 0 !important;
}
.anli_txt {
  text-align: center;
  color: #666;
  margin: 20px 0px;
}
.anli_box {
  padding: 15px;
}
.anli_box img {
  width: 100%;
}
.anli_main {
  width: 500px;
  margin: 0 auto;
  overflow: hidden;
}
.en_txt {
  font-size: 24px;
  color: #1b1b1b;
  text-align: center;
}
.tle_s {
  margin: 50px 0px;
}
.ch_txt {
  font-size: 18px;
  color: #1b1b1b;
  text-align: center;
}
.tle_icon {
  width: 90px;
  margin: 0 auto;
  display: block;
}
.service_box {
  width: 20%;
  float: left;
  padding: 0 25px;
  text-align: center;
}

.banner_box {
  cursor: pointer;
}
.service_box_txt {
  color: #666;
}
.artisan_box p {
  text-align: center;
  color: #666666;
}
.artisan_box {
  box-shadow: #e8e8e8 3px 3px 5px 3px;
}
.navs_active {
  color: #58aaef !important;
}
ul li {
  list-style: none;
  display: inline;
  margin: 0 10px;
}
ul li a {
  color: #666666;
}
.nav_s {
  text-align: center;
}
.btn {
  width: 150px;
  margin: 0 auto;
  display: block;
  margin: 20px auto;
}
.btn img {
  display: block;
  width: 100%;
}
</style>




